<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="test">
        <ul>
            <li v-for=" (p,index) in persons"> 
                <button @click="deleteP(index)">删除</button>
                <button @click="replaceP(index,{id:Date.now(),naem:'AAA',age:23})">替换</button>
              {{index+1}}:{{p.id}}--{{p.name}}--{{p.age}}
            </li>
        </ul>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    new Vue({
      el: "#test",
      data: {
        persons:[
            {id: 3, name: 'Tom', age: 14},
            {id: 5, name: 'Jack', age: 15},
            {id: 7, name: 'Bob', age: 13},
        ]
      },
      methods:{
        deleteP(index){
            this.persons.splice(index,1)
        },
        replaceP(index,newp){
            this.persons.splice(index,1,newp)
        }
      }
    })
    // 重写(重新实现)数组更新元素的7个方法(push/unshift/pop/shift/splice/sort/reverse)
  </script>
</body>
</html>